<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02_节流_lodash</title>
  <!-- 引入lodash: lodash全部的功能引入 -->
  <script src="./lodash.js"></script>
</head>

<body>
  <!-- 
    节流: 
      在规定的间隔时间范围内不会重复触发回调, 只有大于这个时间间隔才会触发回调
      也就是把频繁触发变为少量触发
  -->



    <div>
      <h1>原始的: <span class="span">0</span></h1>
      <button class="btn">点击我加 1</button>
    </div>
  <hr>
    <div>
      <h1>lodash节流: <span class="throttleSpan">0</span></h1>
      <button class="throttleBtn">点击我加 1</button>
    </div>


  <!-- 原始的 -->
  <script>
    const Span = document.querySelector('.span');
    const Btn = document.querySelector('.btn');
    let count = 0;

    // 计数器: 在一秒以内, 数字只能加上1
    Btn.onclick = function () {
      count++;
      Span.innerText = count;
    }
  </script>



  <!-- lodash节流 -->
  <script>
    const throttleSpan = document.querySelector('.throttleSpan');
    const throttleBtn = document.querySelector('.throttleBtn');
    let throttleCount = 0;

    // 节流: 规定时间间隔内连续触发 只能执行一次回调.
    // lodash插件: 里面封装函数的防抖与节流的业务【闭包+延迟器】
    // 1: lodash函数库对外暴露 _函数
    const request = function () {
      throttleCount++;
      throttleSpan.innerText = throttleCount;
    };

    throttleBtn.onclick = _.throttle(request, 1000)
  </script>
</body>

</html>